<%@page import="java.util.List,java.util.Iterator,com.crm.entity.Supplier" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link href="<%=application.getContextPath()%>/css/css-crm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-1.7.2.min.js"></script>
<script language="javaScript" src="<%=application.getContextPath()%>/js/jquery-ui-1.8.20.custom.min.js"></script>

<script language="JavaScript" src="<%=application.getContextPath()%>/js/gen_validatorv4.js" type="text/javascript" ></script>

<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-1.6.min.js"></script>	
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-ui-1.8.17.custom.min.js"></script>	
<link rel="stylesheet" href="<%=application.getContextPath()%>/css/jquery-ui-1.8.17.custom.css"/>

<script language="JavaScript" src="<%=application.getContextPath()%>/js/gen_validatorv4.js" type="text/javascript" ></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery.validate.js"></script>	
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery.validate.min.js"></script>
<script type="text/javascript">
function supplierCheck(){
var name=$("#suppnameid").val();
if(name!=null){
	<%
	if(request.getAttribute("supList")!=null){
		List<Supplier> lsu=(List<Supplier>)request.getAttribute("supList");
		for(Supplier su:lsu){%>
			var dbName="<%=su.getName()%>";
			if(dbName==name){
				$("#suppnameid").focus();
				$("#supMsgDiv").show();
				return false;
			}
			
		<%}
	}
	%>	
	$("#supMsgDiv").hide();
}
}
</script>
<style >
.ui-dialog {
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
}
	#bulletinDialog title{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}

</style>
<script language="javascript">
    $(document).ready(function(){
    	$('.form1').live('click',function(){
  
    		//alert(e.id);
    		var e2=document.getElementById(this.id);
    		
    	   	
    		var divs=$("#divs").val();
    		
    		if(divs!=""){
    		var temp=divs.split(",");
    		
    		
    		if(temp != null){
    			//alert(e2.options.length);
    			if(e2.options.length>1){
    			for(var i=0;i<temp.length;i++){
    				if(e2.options.length>i+1){
    				if(e2.options[i+1].value!=temp[i]){
    				var o=document.createElement('option');
    				o.value=temp[i];
    				o.text=temp[i];
    				e2.options.add(o);
    				//alert(e2.options[1].value);
    				}
    				}else {
    					var o=document.createElement('option');
        				o.value=temp[i];
        				o.text=temp[i];
        				e2.options.add(o);
    				}
    			}
    			}
    				else{
    					for(var i=0;i<temp.length;i++){
    	    				   	    				
    	    				var o=document.createElement('option');
    	    				o.value=temp[i];
    	    				o.text=temp[i];
    	    				e2.options.add(o);
    	    				//alert(e2.options[1].value);
    	    				}
    				}
    	    			
    					
    				}
    		}
    			});
    	});
    		
  
        function addRow(userTable) {
 
            var table = document.getElementById(userTable);
 			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);
			
			table.setAttribute("bgColor", "#C5E4EB");
		    var cell1 = row.insertCell(0);
		    cell1.innerHTML = rowCount ;
           	cell1.setAttribute("bgColor","#FFFFFF");
           	cell1.setAttribute("align","center");
            
           	
            var cell2 = row.insertCell(1);
            cell2.setAttribute("bgColor","#FFFFFF");
            var element2 = document.createElement("input");
			element2.type = "text";
			element2.name="cperson"+rowCount;
			element2.id="cperson"+rowCount;
			element2.className="user";
			element2.size="15";
            cell2.appendChild(element2);
            
            
            /* var cell3 = row.insertCell(2);
            cell3.setAttribute("bgColor","#FFFFFF");
            cell3.innerHTML='<select name="division'+rowCount+'" class="form1" id="division'+rowCount+'" style="border: 0px;">'
 			+' <option value="">Please Select</option>'
            +'</select>'; */
			
			var cell3 = row.insertCell(2);
			cell3.setAttribute("bgColor","#FFFFFF");
			 var element3 = document.createElement("input");
				element3.type = "text";
				element3.name="phone"+rowCount;
				element3.id="phone"+rowCount;
				element3.className="user";
				element3.size="15";
	            cell3.appendChild(element3);
			
			
			 var cell4 = row.insertCell(3);
			//cell5.innerHTML='<input name="org[]"  id="org"'+rowcount+' type="text" class="tablebox-form" size="8"  />';
			 cell4.setAttribute("bgColor","#FFFFFF");
			 var element4 = document.createElement("input");
				element4.type = "text";
				element4.name="email"+rowCount;
				element4.id="email"+rowCount;
				element4.className="email";
				element4.size="15";
	            cell4.appendChild(element4);
				
	            document.getElementById('rowcountid').value=rowCount;

	            $("#cperson"+rowCount).focus();

        
        }
 
        function deleteRow(userTable) {
        	var tbl = document.getElementById(userTable);
        	var lastRow = tbl.rows.length;
        	if (lastRow > 2) tbl.deleteRow(lastRow - 1);
        	var table = document.getElementById(userTable);
        	var rowCount = table.rows.length;
        	/* alert(rowCount); */
        	document.getElementById('rowcountid').value=rowCount-1;
        
        }
 
       

    </script>
</head>

<body>
<div id="main">
  <!-- <div id="header"></div> -->
   <%@ include file="common/header.jsp" %>
  <%@ include file="common/submenu.jsp" %>
  <div id="content">
   <div id="resultMsg" align="center" style="font-size: 12px; color:green ; font-weight: bold " >
    <% 
    	if(request.getParameter("supplierdet")!=null){
    		out.println(request.getParameter("supplierdet"));
    	}
    	
    %>
    </div>
   <div id="supMsgDiv" class="result_msg" style="display:none">
    Supplier Already Exists
    </div>
  <div id="editDiv">
  <div id="saveSupDiv">
  <form name="supplierfrm" id="supplierfrm" action="<%=application.getContextPath()%>/supplier/save.do" method="post">
    <div id="work-area2">
      <div class="heading">Supplier</div>
	  
      <div class="boxIFS">
      
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="left">&nbsp;</td>
              <td align="left">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
            <tr>
              <td width="7%" align="left">&nbsp;</td>
              <td width="12%" align="left">Supplier Name</td>
              <td width="27%" align="left" valign="middle"><label></label>       
                  <input name="sname" type="text" class="form" id="suppnameid" onblur="javascript:return supplierCheck();"/>                 </td>
              <td width="8%" align="left" valign="middle">&nbsp;</td>
              <td width="13%" align="left" valign="middle">Website</td>
              <td width="29%" align="left" valign="middle">
              <input name="website" type="text" class="form" id="websiteid" /></td>
              <td width="4%" align="left" valign="middle">&nbsp;</td>
            </tr>
            <tr>
              <td height="5" align="right"></td>
              <td height="5" align="right"></td>
              <td height="5" align="right" valign="top"></td>
              <td align="left" valign="middle"></td>
              <td height="5" align="left" valign="middle"></td>
              <td height="5" align="left" valign="top"></td>
              <td height="5" align="left" valign="top"></td>
            </tr>
            <tr>
              <td align="left">&nbsp;</td>
              <td align="left">Email</td>
              <td align="left" valign="middle"><label>
                <input name="email"  type="text" class="form-lowercase" id="emailid" />
                </label>              </td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">Fax</td>
              <td align="left" valign="middle"><label>
                <input name="fax" type="text" class="form" id="faxid" />
                </label>              </td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
            <tr>
              <td height="5" align="right"></td>
              <td height="5" align="right"></td>
              <td height="5" align="right" valign="top"></td>
              <td align="left" valign="middle"></td>
              <td height="5" align="left" valign="middle"></td>
              <td height="5" align="left" valign="top"></td>
              <td height="5" align="left" valign="top"></td>
            </tr>
            <tr>
              <td align="left">&nbsp;</td>
              <td align="left" valign="top">Phone Number</td>
              <td align="left" valign="top">
                <input name="phno" type="text" class="form" id="phnoid" />                </td>
              <td align="left" valign="top">&nbsp;</td>
              <td align="left" valign="top">Address</td>
              <td align="left" valign="top"><label>
                <textarea name="address" class="form-textarea" id="addressid"></textarea>
              </label>              </td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
            <tr>
              <td height="5" align="right"></td>
              <td height="5" align="right"></td>
              <td height="5" align="right" valign="top"></td>
              <td align="left" valign="middle"></td>
              <td height="5" align="left" valign="middle"></td>
              <td height="5" align="left" valign="top"></td>
              <td height="5" align="left" valign="top"></td>
            </tr>

               
             <tr>
              <td align="left">&nbsp;</td>
              <td align="left">&nbsp;</td>
              <td align="left" valign="middle">                            </td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
              <td align="left" valign="middle">&nbsp;</td>
            </tr>
            <tr>
              <td height="5" align="right"></td>
              <td height="5" align="right"></td>
              <td height="5" align="right" valign="top"></td>
              <td align="left" valign="middle"></td>
              <td height="5" align="left" valign="middle"></td>
              <td height="5" align="left" valign="top"></td>
              <td height="5" align="left" valign="top"></td>
            </tr>
          </table>
       
      </div>
	  
	  <div class="box2">
	  <table>
	   <tr>
	  <td>
        <table  id="userTable" width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#C5E4EB">
          <tr>
            <td width="36" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"  style="background-repeat:repeat-x">S.No </td>
            <td width="138" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Contact Person</td>

            

            <td width="162" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"  style="background-repeat:repeat-x bgcolor="#FFFFFF">Phone</td>
            <td width="186" align="center" valign="middle" background="<%=application.getContextPath()%>/images/table-box.jpg"   style="background-repeat:repeat-xbgcolor="#FFFFFF">Email</td>
          </tr>
          <tr>
            <td align="center" bgcolor="#FFFFFF">1</td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input name="cperson1" type="text" size="5" /></td>

            <!-- <td align="left" valign="top" bgcolor="#FFFFFF"><select name="division1" class="form1"   style="border: 0px;" id="division1" >
                 <option value="">Please Select</option>
                </select></td> -->

            <td align="left" valign="top" bgcolor="#FFFFFF"><input name="phone1" type="text" size="5" /></td>
            <td align="left" valign="top" bgcolor="#FFFFFF"><input class="email" name="email1" type="text" size="5" /></td>
          </tr>
          
          <input name="rowcount" type="hidden" id="rowcountid" value="1"/>
        </table>
                </td>
        </tr>
        <tr>
                <td align="left" valign="top"><div class="buttonleft"><a href="javascript:addRow('userTable')" >Add Row</a></div> 
                                   <div class="buttonleft"><a href="javascript:deleteRow('userTable')" >Delete Row</a></div>
                                    
                   </td>
              </tr>
              <tr>
                <td> 
                 <div class="box2">
	    			<div class="buttton-main">
	    			<%-- <div class="button"><a href="<%=application.getContextPath()%>/supplier/show.do">Add</a></div> --%>
	    			<div class="button"><a href="<%=application.getContextPath()%>/supplier/delete.do">Delete</a></div>
	    				 <div class="button" onclick="retriveClient();">Edit</div>
	    				<input type="reset"  class="button" value="Clear"/>
	    				<a href=""><input type="submit" class="button" value="Save" onclick="javascript:return validate();"/></a>
	    			</div>
	  			</div>
	  </td>
              </tr>
              </table>
      </div>
	  
	  
    </div>
    </form>
    </div>
    </div>
    <div id="bulletinDialog"  title="Supplier Edit Here"style="display: none;">
                  <div id="clientSearchBox">
           <form>    
            <table >
           <tr><td>&nbsp;</td></tr> 
           <tr><td align="left"><select name="supname"  id="clientId">
                   </select></td>
                   <td align="right"> <input class="button" type="button" id="ok"  onclick="javascript :return resSupp();" value="Edit"/></td></tr>
                    </table> 
                    </form>
                    </div>
                    
        </div>
      </div><div id="footer"></div>  
</div>
</body>
</html>
 <script language="JavaScript" type="text/javascript">
 function retriveClient(){
 	
 	$.ajax({
 		url:" <%=application.getContextPath()%>/supplier/edit.do",
 		mimetype: "text/plain",
 		cache:false,
 		success: function(res){
 			var e2=document.getElementById('clientId');
 			$('#clientId')
 		    .find('option')
 		    .remove()
 		    .end()
 		   	;
 			var temp=res.split(",");
 			var o=document.createElement('option');
 			o.value="";
 			o.text="Please Select";
 			e2.options.add(o);
 			if(temp != null){
 				for(var i=0;i<temp.length-1;i++){
 					var o=document.createElement('option');
 					o.value=temp[i];
 					o.text=temp[i];
 					e2.options.add(o);
 				}
 			}
 			
 			
 		}

 	});

 	var $dialog = $('#bulletinDialog').dialog({
                 autoOpen: false,
                 modal: true,
                 width: 400,
                 height: 150
               				
             });
  			 
             $dialog.dialog('open');
 }

function processFormData(){
  var frmvalidator  = new Validator("supplierfrm");
  
  var rowcount=document.getElementById("rowcountid");
  var rowc=rowcount.value;
//jAlert("this is Sample","the rowcount value is"+rowc); 
  for(var i=1;i<=rowc;i++)
	  {
	
  frmvalidator.addValidation("cperson"+i,"req","Please enter ContactPerson"+i+"");
  frmvalidator.addValidation("cperson"+i,"maxlen=30",	"Max length for ContactPerson"+i+" is 30");
  frmvalidator.addValidation("cperson"+i,"alphanumeric","ContactPerson"+i+"Only alpha and Numeric chars only");
	
  frmvalidator.addValidation("division"+i,"req","Please enter Division"+i);
 
  
  frmvalidator.addValidation("phone"+i,"req","Please enter Phone No"+i+" ");
  frmvalidator.addValidation("phone"+i,"numeric","Phone No"+i+" must be Number Format or Digits");
  

	  frmvalidator.addValidation("email"+i,"req","Please enter email"+i+"for ContactPerson"+i);
	  frmvalidator.addValidation("email"+i,"maxlen=30",	"Max length for email"+i+" is 30");
	  frmvalidator.addValidation("email"+i,"email","Email"+i+"Not Valid for Contactperson"+i);
  
 
}
}
</script>
<script type="text/javascript">
 function resSupp(){
var data=$('#clientId').val();
if(data==null || data==""){
	jAlert("Please Select One Supplier!");
	return false;
}
else{
$.ajax({
	url:"<%=application.getContextPath()%>/supplier/search.do" ,
  	data:"supname="+data,
  	success:function(res){
  		 //$('#companyForm').ajaxForm(options);
  		$('#saveSupDiv').remove();
  		$("#editDiv").append('<div id="editSupDiv"></div>');
  		$('#editSupDiv').html(res);
  		var $dialog = $('#bulletinDialog').dialog({
            autoOpen: false,
            modal: true,
            width:300,
            height: 150
          				
        });
			 
        $dialog.dialog('close');
  	}
  });
}
 }
function validate(){
	var suppName=$("#suppnameid").val();
	var website=$("#websiteid").val();
	var email=$("#emailid").val();
	var fax=$("#faxid").val();
	var phone=$("#phnoid").val();
	var address=$("#addressid").val();
	var division=$("#divs").val();
	
	if(suppName==null || suppName==""){
		jAlert("Please Enter Supplier Name");
		$("#supnameid").focus();
		return false;
	}
	if(website==null || website==""){
		jAlert("Please Enter Website");
		$("#websiteid").focus();
		return false;
	}
	if(email==null || email==""){
		jAlert("Please Enter EMail ID");
		$("#emailid").focus();
		return false;
	}
	var emailFormat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	 if(emailFormat.test(email) == false) {
	 
		 jAlert('Invalid Email Address');
	      $("#emailid").focus();
	      return false;
	   }
	/* if(fax==null || fax==""){
		jAlert("Please Enter FAX Number");
		$("#faxid").focus();
		return false;
	}
	if(phone==null || phone==""){
		jAlert("Please Enter Phone Number");
		$("#phnoid").focus();
		return false;
	} */
	
	if(address==null || address==""){
		jAlert("Please Enter Address");
		$("#addressid").focus();
		return false;
	}
	/* if(division==null || division==""){
		jAlert("Please Enter Divisions");
		$("#divisionid").focus();
		return false;
	} */

	processFormData();
}
</script>
